<!-- 折线图组件 -->
<!--
    lamId:传递折线图id
    lamWidth:传递折线图宽度
    lamHeight:传递折线图高度       
    lamXList:传递折线图x轴数组
    lamXListLength:传递折线图渲染数组的长度值
    lamYList:传递折线图y轴数组
    layTitle:传递折线图标题
    layGradOne:传递折线图标题
    layGradTwo:传递折线图标题

    区域渐变色
    -------------------------------------------------------------------
    layGradOne:传递折线渐变色1
    layGradTwo:传递折线渐变色2
    layLineColor:传递折线线条颜色     
-->

<template>
    <div class="lampAngle">
        <div
            :id="lamId"
            :style="[{ width: lamWidth }, { height: lamHeight }]"
        ></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    props: {
        // 传递折线图id
        lamId: {
            type: [String],
            default: '',
        },
        // 传递折线图宽度
        lamWidth: {
            type: [String, Number],
            default: '',
        },
        // 传递折线图高度
        lamHeight: {
            type: [String, Number],
            default: '',
        },
        // 传递折线图x轴数组
        lamXList: {
            type: [Array],
            default() {
                return [];
            },
        },
        // 传递折线图渲染数组的长度值
        lamXListLength: {
            type: [Number, String],
            default: '',
        },
        // 传递折线图y轴数组
        lamYList: {
            type: [Array],
            default() {
                return [];
            },
        },
        // 传递折线图标题
        layTitle: {
            type: [String],
            default: '',
        },
        // 传递折线图提示区域字体颜色
        layTitleColor: {
            type: [String],
            default: '',
        },

        // 区域渐变色
        // -------------------------------------------------------------------
        // 传递折线渐变色1
        layGradOne: {
            type: [String],
            default: '',
        },
        // 传递折线渐变色2
        layGradTwo: {
            type: [String],
            default: '',
        },
        // 传递折线线条颜色
        layLineColor: {
            type: [String],
            default: '',
        },
    },
    data() {
        return {};
    },
    watch: {
        // 监听传入的数据信息，若是发生变化，则重绘canvas
        layTitle() {
            this.drawChart();
        },
        lamXList() {
            this.drawChart();
        },
        lamXListLength() {
            this.drawChart();
        },
        lamYList() {
            this.drawChart();
        },
    },
    methods: {
        drawChart() {
            // 基于准备好的dom，初始化echarts实例
            var chartDom = document.getElementById(this.lamId);
            var myChart = echarts.init(chartDom);
            // 指定图表的配置项和数据
            let option = (option = {
                backgroundColor: '#252D4C',

                tooltip: {
                    trigger: 'axis',
                    formatter: `{b0}<br>${this.layTitle}：{c0}`,
                    textStyle: {
                        color: this.layTitleColor,
                    },
                    axisPointer: {
                        lineStyle: {},
                    },
                },

                grid: {
                    top: '15%',
                    left: '5%',
                    right: '5%',
                    bottom: '15%',
                    // containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#3B4366',
                            },
                        },
                        splitArea: {
                            // show: true,
                            color: '#f00',
                            lineStyle: {
                                color: '#f00',
                            },
                        },
                        axisLabel: {
                            color: '#959EBF',
                            interval: 1, //x轴数据过多时间隔显示
                            // 拼接换行x轴内容
                            formatter: function (value, index) {
                                // console.log(value);
                                if (value.length < 10) {
                                    return value;
                                } else {
                                    let list = value.split('-');

                                    return `${list[0]}\n${list[1]}-${list[2]}`;
                                }
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                        boundaryGap: false,
                        data: this.lamXList,
                    },
                ],

                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        // max: 140,
                        splitNumber: 4,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#3B4366',
                            },
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#3B4366',
                            },
                        },
                        axisLabel: {
                            show: true,
                            margin: 10,
                            textStyle: {
                                color: '#959EBF',
                            },
                        },
                        axisTick: {
                            show: true,
                        },
                    },
                ],
                series: [
                    {
                        name: this.layTitle,
                        type: 'line',
                        // smooth: true, //是否平滑
                        showAllSymbol: true,
                        // symbol: 'image://./static/images/guang-circle.png',
                        symbol: 'circle',
                        symbolSize: 10,
                        lineStyle: {
                            normal: {
                                color: this.layLineColor,
                                shadowColor: 'rgba(51, 170, 255, 0.3)',
                                shadowBlur: 0,
                                shadowOffsetY: 1,
                                shadowOffsetX: 1,
                            },
                        },
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#959EBF',
                            },
                        },
                        itemStyle: {
                            color: '#252D4C',
                            borderColor: this.layLineColor,
                            borderWidth: 3,
                            shadowColor: 'rgba(0, 0, 0, .3)',
                            shadowBlur: 0,
                            shadowOffsetY: 2,
                            shadowOffsetX: 2,
                        },
                        tooltip: {
                            show: true,
                        },
                        areaStyle: {
                            //区域渐变色设置
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: this.layGradOne,
                                        },
                                        {
                                            offset: 1,
                                            color: this.layGradTwo,
                                        },
                                    ],
                                    false,
                                ),
                                shadowColor: 'rgba(108,80,243, 0.9)',
                                shadowBlur: 20,
                            },
                        },
                        data: this.lamYList,
                    },
                ],
            });
            // 使用刚指定的配置项和数据显示图表。
            option && myChart.setOption(option);
        },
    },

    mounted() {
        this.drawChart();
    },
};
</script>

<style></style>
